<template>
  <div>
    <div class="content-block friendly-content row">
      <h2 class="title">
        <strong>本站友链</strong>
      </h2>
      <div class="col-md-4 col-xs-6" v-for="(friendly,index) in arrFriendly" :key="index">
        <span
          data-toggle="tooltip"
          data-placement="bottom"
          :title="'点击进入 '+friendly.FriendshipLinkName+' 站点'"
        >
          <a target="_blank" :href="friendly.FriendshipLinkUrl">{{friendly.FriendshipLinkName}}</a>
        </span>
        <p>查看关于 {{friendly.FriendshipLinkName}} 的文章</p>
      </div>
      <div id="view"></div>
    </div>
    <div class="content-block comment">
      <h2 class="title">
        <strong>提交友链</strong>
      </h2>
      <form method="post" class="form-inline" id="comment-form">
        <div class="comment-title">
          <div class="form-group">
            <label for="messageName">网站名称：</label>
            <input
              type="text"
              v-validate="'required'"
              name="SiteName"
              class="form-control"
              id="SiteName"
              placeholder="网站名称"
              v-model="objFriendly.SiteName"
            />
            <br/>
            <span style="color:red;">{{ errors.first('SiteName') }}</span>
          </div>
          <div class="form-group">
            <label for="messageEmail">网站地址：</label>
            <input type="text" name="SiteUrl"   v-validate="'required|url'"  class="form-control"  v-model="objFriendly.SiteUrl" id="SiteUrl" placeholder="网站地址" />
            <br/>
            <span style="color:red;">{{ errors.first('SiteUrl') }}</span>
          </div>
          <div class="form-group">
            <label for="messageEmail">站长邮箱：</label>
            <input
              type="email"
              v-validate="'required|email'" name="SiteEmail"
              class="form-control"
              id="SiteEmail"
              placeholder="xxxx@xxxx.com"
              v-model="objFriendly.SiteEmail"
            />
            <br/>
            <span style="color:red;">{{ errors.first('SiteEmail') }}</span>
          </div>
        </div>
        <div class="comment-form">
          <textarea placeholder="请填写网站简介" v-model="objFriendly.SiteSummary" name="messageContent" id="SiteSummary"></textarea>
          <div class="comment-form-footer">
            <div class="comment-form-text">
              请先
              <a href="javascript:;">登录</a> 或
              <a href="javascript:;">注册</a>，也可匿名提交友链
            </div>
            <div class="comment-form-btn">
              <button
                type="submit"
                id="submitSite"
                class="btn btn-default btn-comment"
                @click="addFriendly"
              >提交友链</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'friendly',
  data () {
    return {
      objFriendly: {

      },
      arrFriendly: []
    }
  },
  methods: {
    addFriendly (e) {
      e.preventDefault()
      this.$validator.validateAll().then((result) => {
        if (result) {
          let postData = this.$qs.stringify(this.objFriendly)
          // 提交友情链接
          this.$axios({
            url: config.blogService.blogHostUrl + 'api/blog/Friendly',
            method: 'POST',
            data: postData
          }).then(res => {
            this.$message({
              message: res.data.RetMsg,
              type: 'success',
              center: true,
              showClose: true,
              duration: 1000,
              offset: (document.documentElement.clientHeight / 2) - 100
            })
          }
          ).catch(err => {
            console.log(err)
          })
        }
      }).catch(() => {
        this.$message({
          message: '验证出错!',
          type: 'error',
          center: true,
          showClose: true,
          duration: 1000,
          offset: (document.documentElement.clientHeight / 2) - 100
        })
      })
    }
  },
  created: function () {
    // 获取友情链接列表
    this.$axios.get(config.blogService.blogHostUrl + 'api/blog/friendly'
    ).then(res => {
      console.log(res)
      if (res.data.RetCode === 200) {
        this.arrFriendly = res.data.Data
      }
    }
    ).catch(err => {
      console.log(err)
    })
  }
}
</script>
<style scoped>

</style>
